<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="中国移动网上商城,网上营业厅,话费查询,充话费,
    查流量 移动4G手机,移动合约机,移动4G套餐,移动业务办理,积分兑换"/>
    <meta name="description" content="中国移动网上商城为移动客户提供充值交费,
    账单查询,流量、4G套餐、宽带等业务介绍及办理,提供苹果、三星、
    小米等多款正品低价手机在线购买,让您足不出户,享受便捷移动服务！"/>
    <title>移动-话费查询与充值,手机流量查询,4G套餐办理,移动宽带,手机正品低价</title>
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<section class="shortcut">
    <div class="w">
        <div class="fl">
            <ul>
                <li>欢迎来到移动网站 &nbsp;</li>
                <li>
                    <button id="loginLink">请登录</button>&nbsp;
                    <button id="registerLink" class="style_red">请注册</button>
                    <button id="AdministratorsBaseLink">管理员界面</button>
                </li>
            </ul>
        </div>
        <div class="fr">
            <ul>
                <li><button id="personalCenterBtn">个人中心</button></li>
                <li></li>
                <li><a href="https://www.10086.cn/cmccclient/indexc_new.html" id="clientLink"
                       target="_blank">客户端下载</a></li>
                <li></li>
                <li>客服服务</li>
            </ul>
        </div>
    </div>
</section>
<header class="header w">
    <div class="logo">
        <h1>
            <a href="index.html" title="移动营业厅">移动营业厅</a>
        </h1>
    </div>
    <div class="search">
        <input type="search" name=" " id="">
        <button>搜索</button>
    </div>
    <div class="download">
        <img src="/images/123.jpg">
        <p>扫一扫，下载app</p>
    </div>
</header>
<nav class="nav">
    <div class="w">
        <div class="dropdown">
            <div class="dt">服务列表</div>
            <div class="dd">
                <ul>
                    <li><a href="index.html">交话费</a></li>
                    <li><a href="package.html">办套餐</a></li>
                    <li><a href="#">办业务</a></li>
                    <li><a href="Phone.html">选号码</a></li>
                    <li><a href="person_center.html">我的移动</a></li>
                </ul>
            </div>
        </div>
        <div class="navitems">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="person_center.html">我的移动</a></li>
                <li><a href="homeUserService.html">服务中心</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="w">
    <div class="main">
        <div class="focus">
            <ul>
                <li><img src="upload/112.jpg" alt=""></li>
                <li><img src="upload/113.jpg" alt=""></li>
            </ul>
        </div>
        <div class="newsflash">
            <div class="service">
                <ul>
                    <li>
                        <i></i>
                        <p>套餐订购</p>
                    </li>
                    <li>
                        <i></i>
                        <p>业务办理</p>
                    </li>
                    <li>
                        <i></i>
                        <p>账单查询</p>
                    </li>
                    <li>
                        <i></i>
                        <p>详单查询</p>
                    </li>
                    <li>
                        <i></i>
                        <p>套餐余量</p>
                    </li>
                    <li>
                        <i></i>
                        <p>客服服务</p>
                    </li>
                </ul>
            </div>
            <div class="recharge">
                <p class="recharges">
                    <span class="recharge1" id="recharge1Btn" >话费充值</span>
                    <span class="recharge2" id="recharge2Btn" >流量充值</span>
                </p>
                <div class="pou" id="recharge1" style="display: block;">
                    <form method="put" action="/balance">
                        <dl class="clearfix">
                            <dt>手机号：</dt>
                            <dd class="number">
                                <input type="text" name="phoneNumber" iprompt="请输入手机号码" style="color: rgb(204, 204, 204);">
                            </dd>
                        </dl>
                        <dl class="clearfix">
                            <dt>金额：</dt>
                            <dd class="yuan">
                                <span class="yuan_show toggle"></span>
                                <input type="hidden" name="amount" value="100">
                                <select name="amount_dropdown">
                                    <option value="50">50 元</option>
                                    <option value="69">69 元</option>
                                    <option value="100">100 元</option>
                                    <option value="200">100 元</option>
                                    <option value="300">200 元</option>
                                    <!-- 添加更多选项 -->
                                </select>
                            </dd>
                        </dl>
                        <dl class="clearfix btdd">
                            <dd >
                                <button type="submit" class="btns">立即充值</button>
                            </dd>
                        </dl>
                    </form>
                </div>

                <div class="pou" id="recharge2" style="display: none;">
                    <form method="put" action="/Data_Balance">
                        <dl class="clearfix">
                            <dt>手机号：</dt>
                            <dd class="number">
                                <input type="text"  name="phoneNumber1" iprompt="请输入手机号码" style="color: rgb(204, 204, 204);">
                            </dd>
                        </dl>
                        <dl class="clearfix">
                            <dt>档位GB：</dt>
                            <dd class="yuan">
                                <span class="yuan_show toggle"></span>
                                <input type="hidden" name="amount" value="100">
                                <select name="amount_dropdown1" onchange="updatePrice(this)">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                    <!-- 添加更多选项 -->
                                </select>
                            </dd>
                        </dl>
                        <dl class="clearfix">
                            <dt style="width:200px;text-align:left;text-indent:11px;">
                                支付金额：
                                <label class="price" id="payAmount">
                                    <span class="price_num">10</span>元
                                </label>
                            </dt>
                        </dl>
                        <dl class="clearfix btdd">
                            <dd >
                                <button type="submit" class="btnss">立即充值</button>
                            </dd>
                        </dl>
                    </form>
                    <script>
                        function updatePrice(selectElement) {
                            // 获取下拉框选中的值
                            const selectedValue = selectElement.value;
                            // 更新支付金额标签的内容
                            document.getElementById('payAmount').innerHTML = '<span class="price_num">' + selectedValue + '</span>元';
                        }
                    </script>
                </div>
            </div>
            <script>
                document.getElementById('recharge1Btn').addEventListener('click', function () {
                    document.getElementById('recharge1').style.display = 'block';
                    document.getElementById('recharge2').style.display = 'none';
                });

                document.getElementById('recharge2Btn').addEventListener('click', function () {
                    document.getElementById('recharge1').style.display = 'none';
                    document.getElementById('recharge2').style.display = 'block';
                });
            </script>
        </div>
    </div>
</div>
<script>
    const images = ['upload/112.jpg', 'upload/113.jpg'];
    let currentImageIndex = 0;
    function showNextImage() {
        currentImageIndex = (currentImageIndex + 1) % images.length;
        const imageUrl = images[currentImageIndex];
        const imgElement = document.querySelector('.focus img');
        imgElement.src = imageUrl;
    }
    setInterval(showNextImage, 3000);
    document.getElementById('loginLink').addEventListener('click', function () {
        window.location.href = 'login.html';
    });
    document.getElementById('registerLink').addEventListener('click', function () {
        window.location.href = 'register.html';
    })
    document.getElementById('AdministratorsBaseLink').addEventListener('click', function () {
        window.location.href = 'Administrators_Base.html';
    });
    document.getElementById('personalCenterBtn').addEventListener('click', function () {
        //window.location.href = 'person_center.html';
        var urlParams = new URLSearchParams(window.location.search);
        var phoneNumber = urlParams.get('phone');
        window.location.href = 'person_center.html?phone=' + phoneNumber;
    });
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const loginStatus = urlParams.get('login');
        if (loginStatus === 'success') {
            document.getElementById('loginLink').style.display = 'none';
            document.getElementById('registerLink').style.display = 'none';
        }
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){

        $(".service ul li i").click(function(){

            var index = $(this).parent().index();

            switch(index) {
                case 0:
                    window.location.href = "package.html";
                    break;
                case 1:
                    window.location.href = "";
                    break;
                case 2:
                    window.location.href = "";
                    break;
                case 3:
                    window.location.href = "";
                    break;
                case 4:
                    window.location.href = "";
                    break;
                case 5:
                    window.location.href = "homeUserService.html";
                    break;
                default:
                    break;
            }
        });
    });
</script>
<script>
    document.querySelector(".btns").addEventListener("click", function() {
        event.preventDefault();

        var phoneNumber = document.querySelector('input[name="phoneNumber"]').value;
        var amount = document.querySelector('select[name="amount_dropdown"]').value;
        var phoneRegex = /^\d{11}$/;
        if (!phoneRegex.test(phoneNumber)) {
            alert('手机号必须是11位数字！');
            return;
        }
        var data = { phoneNumber: phoneNumber, amount: amount };

        fetch('/balance', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                alert('充值成功！');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('充值失败，请稍后再试！');
            });
    });
</script>
<script>
    document.querySelector(".btnss").addEventListener("click", function() {
        event.preventDefault();

        var phoneNumber = document.querySelector('input[name="phoneNumber1"]').value;
        var select = document.querySelector('select[name="amount_dropdown1"]');
        var Data_Balance = select.options[select.selectedIndex].text;
        var phoneRegex = /^\d{11}$/;
        if (!phoneRegex.test(phoneNumber)) {
            alert('手机号必须是11位数字！');
            return;
        }

        var data = { phoneNumber: phoneNumber, Data_Balance: Data_Balance };

        fetch('/Data_Balance', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                alert('充值成功！');
            })
            .catch(error => {
                console.error('Error:', error);
                alert('充值失败，请稍后再试！');
            });
    });
</script>
</body>
</html>